<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit</title>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 引入swiper -->
    <link rel="stylesheet" href="css/swiper-bundle.css">

    <!-- 引入重置样式 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 引入页面独立css -->
    <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
    <header>
        <nav class="navbar inverse">
            <div class="container">
                <!-- 在移动端头部导航 -->
                <div class="navbar-header">
                    <!-- 在移动端显示导航栏按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand" href="index.html">spirit</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">testimonials</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container -->
        </nav>
    </header>

    <!-- 广告位 -->
    <div id="banner">
        <h1>wELCOME on <span>spirit8</span></h1>
        <p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
        <div class="icon">
            <img src="images/banner-icon.png" alt="">
        </div>
    </div>

    <div id="about">
        <div class="about-box">
            <div class="left">
                <img src="images/about-background.png" alt="">
            </div>
            <div class="right">
                <div class="small-title">About us</div>
                <div class="title">Some words <span>about us</span></div>
                <div class="line"></div>

                <div class="content">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </div>

                <ul>
                    <li><span>Mission -</span> We deliver uniqueness and quality</li>
                    <li><span>Skills -</span> Delivering fast and excellent results</li>
                    <li><span>Clients -</span> Satisfied clients thanks to our experience</li>
                </ul>

                <div class="browse">
                    <img src="images/about-btn.png" alt="">

                    Browse our work
                </div>
            </div>
        </div>
    </div>

    <div id="team">
        <div class="title">
            Meet <span>our team</span>
        </div>
        <div class="line">
        </div>
        <div class="line2"></div>

        <div class="swiper swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item wow bounceInLeft">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow bounceInDown">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow bounceInUp">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow bounceInRight">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="images/cover.png" alt="">
                            </div>
                            <div class="title">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>

                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 如果需要分页器 -->
            <div class="swiper-pagination pages"></div>
        </div>
    </div>

    <div class="two_main">
        <h2>take a look at <span>our services</span></h2>
        <div class="lin3"></div>
        <p class="p">orem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
            of
            Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
            during
            the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32.</p>
        <ul>
            <li>
                <div class="q"><img src="images/Forma 1.png" alt=""></div>
                <div class="f">
                    <h4>Web design</h4>
                    <p>e first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </li>
            <li>
                <div class="q"><img src="images/Forma 2.png" alt=""></div>
                <div class="f">
                    <h4>Web design</h4>
                    <p>e first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </li>
            <li>
                <div class="q"><img src="images/Forma 3.png" alt=""></div>
                <div class="f">
                    <h4>Web design</h4>
                    <p>e first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </li>
            <li>
                <div class="q"><img src="images/Forma 4.png" alt=""></div>
                <div class="f">
                    <h4>Web design</h4>
                    <p>e first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </li>
        </ul>
    </div>

    <div id="some">
        <div class="title">
            SOME OF <span>OUR CLIENTS</span>
        </div>
        <div class="line">
        </div>
        <div class="line2"></div>
        <div class="swiper main">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/logos.png" alt=""></div>
                <div class="swiper-slide"><img src="images/logos.png" alt=""></div>
                <div class="swiper-slide"><img src="images/logos.png" alt=""></div>
            </div>
            <div class="swiper-pagination gun"></div>
        </div>
    </div>

    <div id="tack">
        <h2>TACK A AT <span>our OUR WORK</span></h2>
        <div class="lin3"></div>
        <p class="p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
            Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
            from a line in section 1.10.32.</p>
        <div class="title">
            <div class="left">Filter by type</div>
            <div class="right"><span>All</span> | Web design | Mobile design | Photograpy</div>
        </div>
        <ul>
            <li><img src="images/work-img.png" alt=""></li>
            <li><img src="images/work-img.png" alt=""></li>
            <li><img src="images/work-img.png" alt=""></li>
            <li><img src="images/work-img.png" alt=""></li>

            <li><img src="images/Layer 77.png" alt=""></li>
            <li><img src="images/Layer 77.png" alt=""></li>
            <li><img src="images/Layer 77.png" alt=""></li>
            <li><img src="images/Layer 77.png" alt=""></li>

            <li><img src="images/Layer 82.png" alt=""></li>
            <li><img src="images/Layer 82.png" alt=""></li>
            <li><img src="images/Layer 82.png" alt=""></li>
            <li><img src="images/Layer 82.png" alt=""></li>
        </ul>
    </div>

    <div id="our">
        <div class="title">
            our clients’ <span>testimonials</span>
        </div>
        <div class="line">
        </div>
        <div class="line2"></div>
        <div class="swiper main">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="main">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
                        line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>
                    <div class="bmain">
                        Dean Martin,<span> CEO Acme Inc.</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="main">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
                        line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>
                    <div class="bmain">
                        Dean Martin,<span> CEO Acme Inc.</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="main">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
                        line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>
                    <div class="bmain">
                        Dean Martin,<span> CEO Acme Inc.</span>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination gun"></div>
        </div>
    </div>

    <div id="contact">
        <div class="title">
            feel free to <span>contact us</span>
        </div>
        <div class="line"></div>
        <div class="line2"></div>

        <div class="content">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
            and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
            the Renaissance.
        </div>

        <div class="form-box">
            <form>
                <div class="input-box">
                    <div class="form-group input-item">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name">
                    </div>

                    <div class="form-group input-item">
                        <label for="email">Email address</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                </div>
                <div class="bbox">
                    <div class="form-group input-item">
                        <label for="message">Message</label>
                        <textarea name="" id="message" cols="30" rows="10"></textarea>
                    </div>
                </div>
            </form>
            <div class="button">
                SEND
            </div>
        </div>
    </div>

    <div id="bead">
        <div class="left">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></div>
        <div class="right">
            <li><img src="images/facebook.png" alt=""></li>
            <li><img src="images/twitter.png" alt=""></li>
            <li><img src="images/google.png" alt=""></li>
            <li><img src="images/linkedin.png" alt=""></li>
            <li><img src="images/dribbble.png" alt=""></li>
        </div>
    </div>



</body>

</html>
<!-- 引入jq库 -->
<script src="js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap 核心js文件 -->
<script src="js/bootstrap.min.js"></script>

<!-- 引入swiper -->
<script src="js/swiper-bundle.min.js"></script>

<!-- 引入wow.js -->
<script src="js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="js/less.min.js"></script>

<script>
    // 实例化WOW插件
    new WOW().init();

    var MySwiper = new Swiper('.swiper', {
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })
</script>